<script setup lang="ts">
import { ref, provide } from 'vue'
import ThemeSwitch from '../components/ThemeSwitch.vue'
import UserInfo from '../components/UserInfo.vue'

// 定义主题相关的状态和方法
const theme = ref('light')
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

// 提供主题相关的值给后代组件
provide('theme', {
  current: theme,
  toggle: toggleTheme
})

// 定义用户相关的状态
const userInfo = ref({
  name: '张三',
  role: 'admin'
})

// 提供用户信息给后代组件
provide('userInfo', userInfo)
</script>

<template>
  <div class="injection-demo" :class="theme">
    <h2>依赖注入示例</h2>

    <section>
      <h3>1. 主题切换</h3>
      <ThemeSwitch />
    </section>

    <section>
      <h3>2. 用户信息</h3>
      <UserInfo />
    </section>
  </div>
</template>

<style scoped>
.injection-demo {
  padding: 20px;
}

.light {
  background-color: #fff;
  color: #333;
}

.dark {
  background-color: #333;
  color: #fff;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
</style> 